<template>
  <div class="q-pa-md">
    <!-- 可用于演示菜单位置变化 <div
      :style="{
        height: height2 * 100 + 'px',
        background: '#' + 'e6f2fd',
      }"
      >当前留白高度{{ height2 * 100 }}</div
    > -->
    <div class="q-gutter-xs">
      <h6>chip 不可点击（chip 无点击事件）</h6>
      <t-chips
        :visible="visible"
        :hideLabel="hideLabel"
        :label="label"
        :readonly="readonly"
        @remove="log('Icecream')"
        v-model="chipList"
        :dataSource="dataSource"
        :placeholder="'请选择或搜索标签'"
        class="aaaaaaaaaaaa-class"
        @click="handleClick"
        @change="handleChange"
        :selfClickable="false"
      >
      </t-chips>
      <div class="btn-line">
        <!-- <t-button class="tr-button-primary" @click="height2 > 1 ?height2-- : null">height -= 100</t-button>
        <t-button class="tr-button-primary" @click="height2++">height += 100</t-button> -->
        <t-button class="tr-button-primary" @click="handleToggleVisible">visible {{ visible }}</t-button>
        <!-- <t-button class="tr-button-primary" @click="handleToggleLabel">hideLabel {{ hideLabel }}</t-button> -->
        <!-- <t-button class="tr-button-primary" @click="label = ''">label + 'w'</t-button> -->
        <t-button class="tr-button-primary" @click="readonly = !readonly">readonly {{readonly}}</t-button>
        <!-- <t-button class="tr-button-primary" @click="selfClickable = !selfClickable">selfClickable {{ selfClickable }}</t-button> -->
      </div>

      <h6>chip 可点击（chip 有点击事件）</h6>
      <t-chips
        :visible="visible"
        :hideLabel="hideLabel"
        :label="label"
        :readonly="readonly"
        @remove="log('Icecream')"
        v-model="chipList"
        :dataSource="dataSource"
        :placeholder="'请选择或搜索标签'"
        class="aaaaaaaaaaaa-class"
        @click="handleClick"
        :selfClickable="true"
      >
      </t-chips>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const visible = ref(true);
      const hideLabel = ref(true);
      const label = ref('label2');
      const height2 = ref(1);
      const readonly = ref(false);
      const selfClickable = ref(false);
      const chipList = ref([
        { TagName: '标记未处理', selected: true },
        { TagName: 'tagName22', selected: false },
        { TagName: 'tagName3' },
        { TagName: 'tagName4' },
        { TagName: 'tagName21' },
        { TagName: 'tagName31' },
        { TagName: 'tagName41' },
        { TagName: 'tagName211' },
        { TagName: 'tagName311' },
        { TagName: 'tagName411' },
      ]);
      const dataSource = ref([
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签1' },
        { TagName: '标签2' },
        { TagName: '标签3' },
      ]);
      const word = ref('word111');
      const icecream = ref(true);
      const eclair = ref(true);
      const cupcake = ref(true);
      const gingerbread = ref(true);
      return {
        readonly,
        selfClickable,
        visible,
        hideLabel,
        label,
        height2,
        chipList,
        dataSource,
        word,
        icecream,
        eclair,
        cupcake,
        gingerbread,
        handleClick(item) {
          console.log('handleClick -- 外部', item);
        },
        handleChange(params) {
          console.log('handleChange -- 外部', params);

        },
        handleToggleVisible() {
          visible.value = !visible.value;
        },
        handleToggleLabel() {
          hideLabel.value = !hideLabel.value;
        },
        handleSubmit(event) {
          console.log('submit', event);
        },
        handleInput(value) {
          console.log('input', value);
        },
        handleChange(value) {
          console.log('change', value);
        },
        onResetClick() {
          icecream.value = true;
          eclair.value = true;
          cupcake.value = true;
          gingerbread.value = true;
        },
        log(desert) {
          console.log(`${desert} has been removed`);
        },
      };
    },
  };
</script>


<style scoped>
.btn-line > * {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
